<template>
  <div class="max">
    <my-header :backBtn="true">
      <div slot="title">
        晨检报告
      </div>
    </my-header>
    <div class="cont-nof report-daily">

      <div class="report_flex">
        <!--        <div class="report_top">-->
        <!--          晨检报告-->
        <!--        </div>-->
        <div style="display: flex;flex-direction: row;justify-content: space-between">
          <!--          <div class="report_top2">-->
          <!--            <div class="stu-img shadow" @click="showPhoto(report.avatar)">-->
          <!--              <img :src="report.avatar" alt="">-->
          <!--            </div>-->
          <!--            &lt;!&ndash;            <div @click="showPhoto(report.photo)">&ndash;&gt;-->
          <!--            &lt;!&ndash;              <img class="scenePicture" :src="report.photo" alt="">&ndash;&gt;-->
          <!--            &lt;!&ndash;            </div>&ndash;&gt;-->
          <!--          </div>-->
          <div class="report_top22">
            <div
              style="text-align: left;width: 65%">
              姓名：{{ report.name }}<br>
              年龄：{{ report.age }}岁<br>
              性别：{{ report.sex }}<br>
              班级：{{ report.clazzName }}<br>
              晨检时间：{{ report.reportTime }}<br>
              身高：{{ report.height }}cm<br>
              体重：{{ report.weight }}kg<br>
              BMI：{{ report.bmi }}<br>
              <template v-if="report.bmiState!='偏瘦'">{{ report.bmiState }}</template>
              <!--              (35-37.3)<br>-->
              体温：
              <template v-if="Number(report.temperature)>=30">{{ report.temperature }}℃</template>
              {{ report.temperatureState }}
              (35-37.3)
              <br>
            </div>
            <template
              v-if="report.status!='体检异常' && report.status!='需复检' && Number(report.temperature)>35 && Number(report.temperature)<=37.3">

              <img style="width: 35%" src="@/../static/img/good.png">

            </template>
            <template v-else>

              <img style="width: 35%" src="@/../static/img/res.png">

            </template>
            <!--            <div class="situation-item">-->
            <!--              <div>-->
            <!--                <li class="flex line" :class="{'C':report.heightStatus!='正常'}">-->
            <!--                  <span class="span_1">身高</span>-->
            <!--                  <span class="span_2">{{ report.height }}cm</span>-->
            <!--                  &lt;!&ndash;              <span class="span_3">{{report.heightStatus}}</span>&ndash;&gt;-->
            <!--                  &lt;!&ndash;              <span class="span_4">({{report.heightRange}})</span>&ndash;&gt;-->
            <!--                  <span class="span_3"></span>-->
            <!--                  <span class="span_4"></span>-->
            <!--                </li>-->
            <!--                <li class="flex line" :class="{'C':report.weightStatus!='正常'}" v-show="report.weight>0">-->
            <!--                  <span class="span_1">体重</span>-->
            <!--                  <span class="span_2">{{ report.weight }}kg</span>-->
            <!--                  &lt;!&ndash;              <span class="span_3"><template v-if="report.weightStatus!='偏低'">{{report.weightStatus}}</template></span>&ndash;&gt;-->
            <!--                  &lt;!&ndash;              <span class="span_4">({{report.weightRange}})</span>&ndash;&gt;-->
            <!--                  <span class="span_3"></span>-->
            <!--                  <span class="span_4"></span>-->
            <!--                </li>-->
            <!--                <li class="flex line" :class="{'C':report.bmiState!='正常'}">-->
            <!--                  <span class="span_1">BMI</span>-->
            <!--                  <span class="span_2">{{ report.bmi }}</span>-->
            <!--                  <span class="span_3"> <template v-if="report.bmiState!='偏瘦'">{{ report.bmiState }}</template> </span>-->
            <!--                  <span class="span_4">(18.5-23.9)</span>-->
            <!--                </li>-->
            <!--                <li class="flex line" :class="{'C':report.temperatureState!='正常'}">-->
            <!--                  <span class="span_1">体温</span>-->
            <!--                  <span class="span_2"> <template v-if="Number(report.temperature)>=35">{{ report.temperature }}℃</template></span>-->
            <!--                  <span class="span_3">{{ report.temperatureState }}</span>-->
            <!--                  <span class="span_4">(35-37.3)</span>-->
            <!--                </li>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </div>
        <div style="display: flex;flex-direction: column;justify-content: space-between">
          <!--          <div class="report_top3" v-if="report.photo.length>0">-->
          <!--            现场图片-->
          <!--            <div @click="showPhoto(report.photo)">-->

          <!--              <img class="scenePicture" :src="report.photo" alt="">-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="report_top3">
            眼睛照片
            <div @click="showPhoto(report.eyesPhoto)">

              <img class="scenePicture" style="width: 80%; height: 75%;" :src="report.eyesPhoto" alt="">
            </div>
          </div>
          <!--        </div>-->
          <!--        <div style="display: flex;flex-direction: row;justify-content: space-between">-->
          <div class="report_top3">
            手心照片
            <div @click="showPhoto(report.handPhoto)">
              <img class="scenePicture" style="width: 80%; height: 75%;" :src="report.handPhoto" alt="">
            </div>
          </div>
          <div class="report_top3">
            口腔照片
            <div @click="showPhoto(report.mouthPhoto)">
              <img class="scenePicture" style="width: 80%; height: 75%;" :src="report.mouthPhoto" alt="">
            </div>
          </div>
          <!--        </div>-->
          <div class="report_top4" v-if="report.handDownPhoto!='http://wy-file.wekids.group/'">
            手背照片
            <div @click="showPhoto(report.handDownPhoto)">
              <img class="scenePicture" style="width: 80%; height: 75%;" :src="report.handDownPhoto" alt="">
            </div>
          </div>
        </div>
        <div class="report_top5">
          <div class="situation-item">
            <div class="situation-item-titl">综合评定</div>
            <div class="flex">
              <div class="report_result" :class="report.result">
                {{ report.result }}
              </div>
              <div class="report_standard">
                <li class="tl">
                  A：全部测量结果正常
                </li>
                <li class="tl">
                  B：BMI 低于 18.4 或 高于 23.9
                </li>
                <li class="tl">
                  C：体温异常 或 BMI 大于 27.9
                </li>
              </div>
            </div>

          </div>
          <div class="situation-item" v-if="report.status.length>0">
            <div class="situation-item-titl">人工评定</div>
            <template class="flex">
              <div class="report_result2" v-if="report.status=='体检完成'">
                手口眼正常
              </div>
              <div class="report_result3" v-else-if="report.status=='体检异常'">
                手口眼异常
              </div>
              <div class="report_result3" v-if="Number(report.temperature)>=37.3">
                温度过高
              </div>
              <div class="report_result3" v-else-if="Number(report.temperature)<=30">
                没测到温
              </div>
              <div class="report_result3" v-else-if="Number(report.temperature)>=30 && Number(report.temperature)<=35">
                温度过低
              </div>
              <div class="report_result2"
                   v-else-if="Number(report.temperature)>=35 && Number(report.temperature)<=37.3">
                温度正常
              </div>
            </template>
          </div>

          变化曲线
          <div class="situation-item">
            <div class="situation-item-titl">身高变化趋势</div>
            <div>
              <li class="flex line" @click="changeChart(hChart,'month','height')">
                <span>最近一月增长</span>
                <span>{{ statics.h.monthInc }}cm</span>
              </li>
              <li class="flex line" @click="changeChart(hChart,'year','height')">
                <span>最近一年增长</span>
                <span>{{ statics.h.yearInc }}cm</span>
              </li>
              <li class="line">
                <charts id="height" ref='height'></charts>
              </li>
            </div>
          </div>
          <div class="situation-item">
            <div class="situation-item-titl">体重变化趋势</div>
            <div>
              <li class="flex line" @click="changeChart(wChart,'month','weight')">
                <span>最近一月增长</span>
                <span>{{ statics.w.monthInc }}kg</span>
              </li>
              <li class="flex line" @click="changeChart(wChart,'year','weight')">
                <span>最近一年增长</span>
                <span>{{ statics.w.yearInc }}kg</span>
              </li>
              <li class="line">
                <charts id="weight" ref='weight'></charts>
              </li>
            </div>
          </div>
          <div class="situation-item">
            <div class="situation-item-titl">BMI变化趋势</div>
            <div>
              <li class="flex line" @click="changeChart(bmiChart,'month','bmi')">
                <span>最近一月增长</span>
                <span>{{ statics.bmi.monthInc }}</span>
              </li>
              <li class="flex line" @click="changeChart(bmiChart,'year','bmi')">
                <span>最近一年增长</span>
                <span>{{ statics.bmi.yearInc }}</span>
              </li>
              <li class="line">
                <charts id="bmi" ref='bmi'></charts>
              </li>
            </div>
          </div>
        </div>
      </div>

      <!--      <div class="flex stuInfo shadow">-->
      <!--        <div class="stu-img shadow" @click="showPhoto(report.avatar)">-->
      <!--          <img :src="report.avatar" alt="">-->
      <!--        </div>-->
      <!--        <div class="flex stu-info">-->
      <!--          <div class="tl">姓名：{{ report.name }}</div>-->
      <!--          <div class="tl">年龄：{{ report.age }}岁</div>-->
      <!--          <div class="tl">性别：{{ report.sex }}</div>-->
      <!--          <div class="tl">班级：{{ report.clazzName }}</div>-->
      <!--          <div class="tl stu-info-big">晨检时间：{{ report.reportTime }}</div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="testData">
        <!--        <div class="situation-item">-->
        <!--          <div class="situation-item-titl">现场图片</div>-->
        <!--          <div class="showPhoto-wrapper">-->
        <!--            <div @click="showPhoto(report.photo)">-->
        <!--              <p>人脸照片</p>-->
        <!--              <img class="scenePicture" :src="report.photo" alt="">-->
        <!--            </div>-->
        <!--            <div @click="showPhoto(report.eyesPhoto)">-->
        <!--              <p>眼部照片</p>-->
        <!--              <img class="scenePicture" :src="report.eyesPhoto" alt="">-->
        <!--            </div>-->
        <!--            <div @click="showPhoto(report.mouthPhoto)">-->
        <!--              <p>口腔照片</p>-->
        <!--              <img class="scenePicture" :src="report.mouthPhoto" alt="">-->
        <!--            </div>-->
        <!--            <div @click="showPhoto(report.handPhoto)">-->
        <!--              <p>手心照片</p>-->
        <!--              <img class="scenePicture" :src="report.handPhoto" alt="">-->
        <!--            </div>-->
        <!--            <div @click="showPhoto(report.handDownPhoto)">-->
        <!--              <p>手背照片</p>-->
        <!--              <img class="scenePicture" :src="report.handDownPhoto" alt="">-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import charts from '@/components/reportCharts.vue'

export default {
  components: {
    charts
  },
  data() {
    return {
      report: {},
      statics: {
        w: {},
        h: {},
        bmi: {}
      },
      hChart: {},
      wChart: {},
      bmiChart: {},
    }
  },
  methods: {
    back() {
      let back = this.$Cookies.get('from');
      if (back) {
        this.$router.push(back);
      } else {
        wx.closeWindow();
      }
    },
    showPhoto(url) {
      wx.previewImage({
        previewImage: url,
        urls: [url]
      })
    },
    changeChart(target, type, ref) {
      target.show = type;
      this.renderChart(ref, target)

    },
    renderChart(ref, data) {
      if (ref && data) {
        this.$refs[ref].renderChart(data[data.show]);
      } else {
        this.$refs.height.renderChart(this.hChart[this.hChart.show]);
        this.$refs.weight.renderChart(this.wChart[this.wChart.show]);
        this.$refs.bmi.renderChart(this.bmiChart[this.bmiChart.show]);
      }
    },
    handleStatics(data) {
      let chart = {
        show: 'month',
        year: {
          x: [],
          y: []
        },
        month: {
          x: [],
          y: []
        }
      };
      for (let i = 0; i < data.month.length; i++) {
        chart.month.x.push(data.month[i].date);
        chart.month.y.push(data.month[i].value);
      }
      for (let i = 0; i < data.year.length; i++) {
        chart.year.x.push(data.year[i].date);
        chart.year.y.push(data.year[i].value);
      }
      return chart
    }
  },
  created() {
    let id = this.$route.query.id;
    //todo 展示报告详情
    this.$http.fetchReportDetail(id).then(resp => {
      this.report = resp.data;
      this.statics = resp.data.statics;
      this.hChart = this.handleStatics(this.statics.h);
      this.wChart = this.handleStatics(this.statics.w);
      this.bmiChart = this.handleStatics(this.statics.bmi);
      this.$nextTick(function () {
        this.renderChart();
      })
    })
  },
}
</script>

<style scoped>
.report-daily {
  padding: 0.5rem;
  box-sizing: border-box;
}

.stuInfo {
  width: 100%;
  height: 12rem;
  padding: 1rem;
  box-sizing: border-box;
  justify-content: space-between;
}

.stu-img {
  width: 10rem;
  height: 10rem;
  overflow: hidden;

}

.stu-img img {
  width: 100%;
  height: 100%;
}

.stu-info {
  width: calc(100% - 12rem);
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.stu-info div {
  font-size: 1.4rem;
  height: 20%;
}

.stu-info-big {
  width: 100% !important;
}

.testData {
  width: 100%;
  margin-top: 3rem;
}

.testData .title {
  width: auto;
  padding: 0.5rem;
  color: #fff;
  background: #2aa7e1;
}

.situation-item {
  position: relative;
  border: 1px solid #2aa7e1;
  box-sizing: border-box;
  width: 100%;
  margin: 1.5rem 0;
  padding: 3rem 1rem 1rem 1rem;
}

.report_flex {
  flex-direction: column;
  display: flex;

}

.report_top {
  margin: 0.5rem;

  display: flex;
  flex-direction: row;
  font-family: "PingFang SC";
  font-size: 1.4rem;
  justify-content: center;
  align-items: center;
  background-color: #DAF7F6;
  border: 2px solid #52C0C8;
  box-sizing: border-box;
  color: #7690AA;
  height: 5rem;
}

.report_top2 {

  margin: 0.5rem;

  width: 25%;
  display: flex;
  flex-direction: column;
  font-family: "PingFang SC";
  font-size: 1.4rem;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #52C0C8;
  box-sizing: border-box;
  background-color: #E9F1FE;
  color: #7690AA;
  height: 25rem;
}

.report_top22 {

  width: 100%;
  margin: 0.5rem;
  padding-left: 0.5rem;
  display: flex;
  flex-direction: row;
  font-family: "PingFang SC";
  font-size: 1.2rem;
  align-items: center;
  justify-content: flex-start;
  border: 2px solid #52C0C8;
  box-sizing: border-box;
  background-color: #E9F1FE;
  color: #7690AA;
  height: 24rem;
}

.report_top3 {

  margin: 0.5rem;

  display: flex;
  flex-direction: column;
  font-family: "PingFang SC";
  font-size: 1.4rem;
  align-items: center;
  justify-content: space-between;
  background-color: #DAF7F6;
  border: 2px solid #52C0C8;
  box-sizing: border-box;
  color: #7690AA;
  height: 15rem;
}

.report_top4 {

  margin: 0.5rem;

  display: flex;
  flex-direction: column;
  font-family: "PingFang SC";
  font-size: 1.4rem;
  align-items: center;
  justify-content: space-between;
  background-color: #DAF7F6;
  border: 2px solid #52C0C8;
  box-sizing: border-box;
  color: #7690AA;
  height: 15rem;

}

.report_top5 {

  margin: 0.5rem;

  display: flex;
  flex-direction: column;
  font-family: "PingFang SC";
  font-size: 1.4rem;
  align-items: center;

  background-color: #E9F1FE;
  color: #7690AA;

}

.situation-item-notitl {
  padding: 1rem;
}

.situation-item-titl {
  position: absolute;
  top: -1.2rem;
  background: #2aa7e1;
  color: #fff;
  padding: 0 1rem;
}

.situation-item li {
  padding: 1rem;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 1.4rem;
}


.A {
  color: #0d0d0d;
}

.B {
  color: #0d0d0d;
}

.C {
  color: #0d0d0d;
}

.report_standard {
  width: 55%;
}

.report_standard li {
  font-size: 1.2rem;
}

.span_1 {
  width: 25%;
  text-align: left;
}

.span_2 {
  width: 25%;
  text-align: left;
}

.span_3 {
  width: 20%;
  text-align: center;
}

.span_4 {
  width: 30%;
  text-align: right;
  font-size: 1.4rem;
}

.scenePicture {
  width: 100%;
}

.showPhoto-wrapper p {
  text-align: left;
}

.report_result {
  width: 45%;
  font-size: 4rem;
  font-weight: 900;
}

.report_result2 {
  font-size: 3rem;
  color: #00af2c;
}

.report_result3 {
  font-size: 3rem;
  color: #ff808c;
}
</style>
